<template>
    <draggable class="compo-content" tag="div" :list="listData" v-bind="itemOptions">
        <div class="compo-item" v-for="(item, index) in listData" :key="`prop-${index}`">
            <div class="item-sort">
                <i class="el-icon-s-operation"></i>
            </div>
            <div class="item-del" @click.stop="deleteBlock(index)">
                <i class="el-icon-delete"></i>
            </div>
            <div class="item-head">
                <div class="title">属性名：</div>
                <div>
                    <el-input v-model.trim="item.specName" auto-complete="off" placeholder="请输入属性名称"></el-input>
                </div>
            </div>
            <div class="item-body">
                <div class="title">值域：</div>
                <draggable class="range-wrap" tag="div" :list="item.ranges" v-bind="rangeOptions">
                    <div v-for="(range, rIndex) in item.ranges" class="range-item" :key="`range-${rIndex}`">
                        <div><el-input v-model.trim="range.rangeValue" auto-complete="off" placeholder="请输入值域名称"></el-input></div>
                        <div class="range-del" @click.stop="deleteRange(index, rIndex)">
                            <i style="color:" class="el-icon-error"></i>
                        </div>
                    </div>
                    <div class="add-range" @click.stop="addRange(index)">
                        <i class="el-icon-circle-plus-outline"></i>
                    </div>
                </draggable>
            </div>
        </div>
        <div class="add-compo" @click.stop="addCompo">
            <i class="el-icon-circle-plus-outline"></i>
        </div>
    </draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
    props: {
        pdata: Array,
        default: () => {
            return []
        }
    },
    components: {
        draggable
    },
    watch: {
        pdata: {
            handler (value) {
                this.listData = JSON.parse(JSON.stringify(value))
            },
            immediate: true,
        }
    },
    data () {
        return {
            listData: [],
            itemOptions: {
                animation: 200,
                sort: true,
                disabled: false,
                ghostClass: 'ghost',
                draggable: '.compo-item'
            },
            rangeOptions: {
                animation: 200,
                sort: true,
                disabled: false,
                ghostClass: 'ghost',
                draggable: '.range-item'
            }
        }
    },
    methods: {
        deleteBlock (index) {
            this.listData.splice(index, 1)
        },
        deleteRange (index, rIndex) {
            this.listData[index].ranges.splice(rIndex, 1)
        },
        addRange (index) {
            if (!this.listData[index].ranges) {
                this.listData[index].ranges = []
            }
            this.listData[index].ranges.push({
                specCode: this.listData[index].specCode,
                rangeValue: '',
            })
        },
        addCompo () {
            this.listData.push({
                specName: '',
                ranges: []
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.compo-content{
    display: flex;
    flex-wrap: wrap;
    .compo-item{
        position: relative;
        width: 100%;
        border: 1px solid #CCC;
        border-radius: 5px;
        box-shadow: 0 0 3px #eee;
        margin-bottom: 12px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        .item-sort{
            position: absolute;
            right: 36px;
            top: 6px;
            i{
                font-size: 18px;
                font-weight: bolder;
                color: #409eff;
                cursor: pointer;
            }
        }
        .item-del{
            position: absolute;
            right: 12px;
            top: 6px;
            i{
                font-size: 18px;
                font-weight: bolder;
                color: #e84c15;
                cursor: pointer;
            }
        }
        .item-head{
            display: flex;
            align-items: center;
            height: 32px;
        }
        .title{
            width: 72px;
        }
        .item-body{
            flex: 1;
            display: flex;
            flex-direction: row;
            margin-top: 6px;
            .range-wrap{
                width: 0;
                flex: 1;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                .range-item{
                    border: 1px solid #CCC;
                    border-radius: 3px;
                    padding: 0 4px 0 10px;
                    display: flex;
                    margin: 0 6px 6px 0;
                    .range-del{
                        margin-left: 4px;
                        cursor: pointer;
                        color: #e84c15;
                    }
                }
                .add-range{
                    height: 34px;
                    font-size: 24px;
                    color: #409eff;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
    .add-compo{
        width: 100%;
        font-size: 24px;
        color: #409eff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
<style lang="scss">
.range-item{
    input{
        border: none;
        outline: none;
        padding: 0px;
    }
}
</style>